<template>
  <div id="tag">
    <el-tag
      v-for="(item, index) of tags"
      :key="item.path"
      :closable="item.name !== 'home'"
      :effect="$route.name === item.name ? 'dark': 'plain'"
      @click="MenuJump(item)"
      @close="closeMenu(item,index)"
      size='small'
    >
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script>
// 获取vuex的数据
//  - mapState是一个函数,返回一个对象(需要解构的是state的某个数据)
//  - mapMutations是一个函数,返回一个数组(需要解构的是state中mutations的某个方法)
import { mapState, mapMutations } from 'vuex'
export default {
    name: 'CommonTags',
    data() {
        return {}
    },
    computed: {
        ...mapState({
            tags: state => state.tab.tabsList,
        }),
    },
    methods: {
        // 获取vuex中的deleteTabData方法
        ...mapMutations([ 'deleteTabData' ]),
        // 标签tags跳转
        MenuJump(item) {
            // 在当前页时不跳转，不在当前页时跳转
            if (this.$route.name !== item.name) {
                this.$router.push({ name: item.name });
            }
        },
        // 删除标签tags - 即,删除当前数据
        closeMenu(item, index) {
            // 调用state中的mutations方法
            this.deleteTabData(item);
            // 1. 处理没有高亮显示的标签删除的情况
                // 当前路由名称和高亮显示的名称不一致时,默认删除
            if(this.$route.name !== item.name) {
                return;
            }
            // 2. 处理高亮显示的标签删除的情况
                // 1. 高亮显示为最后一个 - 跳转为当前标签的前一个
                // 2. 高亮显示为其他 - 跳转为删除标签后的当前标签
            const length = this.tags.length;
            // 当最后一个元素的索引和长度相同,则删除的为最后一个元素
            if(index === length) {
                this.$router.push({ name: this.tags[index - 1].name });
            }else {
                this.$router.push({ name: this.tags[index].name });
            }
            console.log('length, index', length, index);
        }
    },
}
</script>

<style lang="less" scoped>
    #tag {
        padding: 20px;
        .el-tag {
            cursor: pointer;
            margin-right: 15px;
        }
    }
</style>